<template>
  <div class="app-container">
    <el-card v-loading="loading">
      <div slot="header">
        <el-button type="primary" @click="resetForm()">返回</el-button>
      </div>
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-card style="border: 0" shadow="never">
              <el-form-item label="发布日期" prop="pushTime">
                <el-date-picker
                  v-model="formData.pushTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="订单号" prop="orderNo">
                <el-input placeholder="订单号" v-model="formData.orderNo"/>
              </el-form-item>
              <!--<el-form-item label="需求计划单号" prop="planNumber">-->
              <!--<el-input placeholder="需求计划单号"  v-model="formData.planNumber"/>-->
              <!--</el-form-item>-->


              <el-form-item label="需求计划单号" prop="planNumber">
                <el-input placeholder="需求计划单号" v-model="formData.planNumber"/>
                <!--                <el-select clearable v-model="formData.planNumber" placeholder="请选择" @change="loadPurseApplyData">-->
                <!--                  <el-option-->
                <!--                    v-for="item in applyDataList"-->
                <!--                    :key="item.procurementApplyId"-->
                <!--                    :label="item.planNumber"-->
                <!--                    :value="item.planNumber">-->
                <!--                  </el-option>-->
                <!--                </el-select>-->

              </el-form-item>


              <el-form-item label="标准对象号" prop="standObjectNumber">
                <el-input placeholder="标准对象号" v-model="formData.standObjectNumber"/>
              </el-form-item>
              <el-form-item label="标准对象项目号" prop="standProjectNumber">
                <el-input placeholder="标准对象项目号" v-model="formData.standProjectNumber"/>
              </el-form-item>
              <!--<el-form-item label="物料编码" prop="materailNumber">-->
              <!--<el-input placeholder="物料编码" v-model="formData.materailNumber"/>-->
              <!--</el-form-item>-->
              <!--              <el-form-item label="物料描述" prop="materailDesc">-->
              <!--              <el-input v-model="formData.materailDesc" class="textarea" type="textarea" :rows="5" />-->
              <!--              </el-form-item>-->
              <!--              <el-form-item label="数量" prop="purchaseQuantity">-->
              <!--              <el-input placeholder="数量" v-model="formData.purchaseQuantity"/>-->
              <!--              </el-form-item>-->
              <!--<el-form-item label="单位" prop="unit">-->
              <!--<el-input placeholder="单位" v-model="formData.unit"/>-->
              <!--</el-form-item>-->

              <el-form-item label="项目文本" prop="projectText">
                <el-input v-model="formData.projectText" class="textarea" type="textarea" :rows="5"/>
              </el-form-item>


            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card style="border: 0" shadow="never">
              <el-form-item label="卸货点" prop="unloadingAddress">
                <el-input placeholder="卸货点" v-model="formData.unloadingAddress"/>
              </el-form-item>
              <el-form-item label="提报单元文本" prop="submitText">
                <el-input v-model="formData.submitText" class="textarea" type="textarea" :rows="5"/>
              </el-form-item>
              <el-form-item label="库存地" prop="stockAddress">
                <el-input placeholder="库存地" v-model="formData.stockAddress"/>
              </el-form-item>
              <el-form-item label="行项目金额" prop="projectAmount">
                <el-input placeholder="行项目金额" type="number" v-model="formData.projectAmount"/>
              </el-form-item>
              <!-- <el-form-item label="易派客物料标识" prop="ypkProductFlag">
                <el-input placeholder="易派客物料标识" v-model="formData.ypkProductFlag"/>
              </el-form-item> -->
              <el-form-item label="工单/网络号" prop="workOrderNo">
                <el-input placeholder="工单/网络号" v-model="formData.workOrderNo"/>
              </el-form-item>
              <el-form-item label="成本中心" prop="costCenter">
                <el-input placeholder="成本中心" v-model="formData.costCenter"/>
              </el-form-item>
              <el-form-item label="业务类型" prop="businessType">
                <el-input placeholder="业务类型" v-model="formData.businessType"/>
              </el-form-item>
              <el-form-item label="供应商" prop="supplierId">

                <el-select clearable v-model="formData.supplierId" placeholder="请选择">
                  <el-option
                    v-for="item in allSuppliers"
                    :key="item.value"
                    :label="item.supplierName"
                    :value="item.id">
                  </el-option>
                </el-select>

              </el-form-item>

            </el-card>
          </el-col>
          <el-col :span="24">
            <div v-if="formData.materailInfoList.length"
                 v-for="(item,index) in formData.materailInfoList" :key="index">
              <div style="display: flex;">
                <el-form-item prop="materailBasicInfoId" label="物料编号,描述">
                  <el-col :span="24">
                    <el-select clearable v-model="item.materailBasicInfoId" filterable
                               remote
                               reserve-keyword
                               :remote-method="queryMaterail"
                               :loading="loading" placeholder="请输入物料描述">
                      <el-option
                        v-for="item1 in materiaOptions"
                        :key="item1.value"
                        :label="item1.materialNumber+'---'+item1.materialName"
                        :value="item1.id">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-form-item>

                <el-form-item prop="projectText" label="数量">
                  <el-col :span="24">
                    <el-input v-model="item.purchaseQuantity" type="number" :rows="5"/>
                  </el-col>
                </el-form-item>

                <el-form-item label="工厂非限制库存" prop="notLimitStock">
                  <el-col :span="24">
                    <el-input type="number" placeholder="工厂非限制库存" v-model="item.notLimitStock"/>
                  </el-col>
                </el-form-item>
                <el-form-item label="单价" prop="singlePrice">
                  <el-col :span="24">
                    <el-input placeholder="单价" v-model="item.singlePrice"/>
                  </el-col>
                </el-form-item>
                  <div>
                    <el-button v-if="formData.statusName == '新建'" @click="deleLine(index)" type="medium " size="" icon="el-icon-add">删除</el-button>
                  </div>
              </div>
            </div>
          </el-col>

          <el-col :span="24">
            <el-form-item v-if="formData.statusName == '新建'">
              <el-button @click="submitLine" type="primary" icon="el-icon-add">添加物料</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button @click="resetForm">关闭</el-button>
          <el-button :loading="isAdd" type="primary" @click="submitForm('ruleForm')">
            <span v-if="isAdd">提交中...</span>
            <span v-else>提交</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog :visible.sync="visible" append-to-body width="33%">
      <p class="map">物料编号</p>
      <el-select clearable v-model="materailInfoValue" filterable
                 remote
                 reserve-keyword
                 :remote-method="queryMaterail"
                 :loading="loading" placeholder="请输入物料描述">
        <el-option
          v-for="item in materiaOptions"
          :key="item.value"
          :label="item.materialNumber+'---'+item.materialName"
          :value="item.id">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button class="global-button" round type="primary" @click="submitLine">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    procurementDetail,
    submitProcurement,
    reSubmitProcurement,
    getMaterialAll,
    getAllSuppliers,
    procurementApplyIsSelect
  } from '@/api/purchase.js'
  import {getApplyPurchaseList} from '@/api/materialScience/warehousingApplication.js'
  import {formatTime} from '@/utils/utils.js'

  let $this = null
  export default {
    name: 'submitForm',
    props: {
      subData: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        isAdd: false,
        loading: false,
        formData: {
          materailInfoList: [],
          statusName: "新建"
        },
        queryInfo: {
          pageNo: 1,
          pageSize: 25,
          materialName:''
        },
        rules: {},
        materailInfoValue: null,
        materiaOptions: [],
        allSuppliers: [],
        visible: false,
        applyDataList: []
      }
    },
    created() {
      $this = this
      this.init()
      if ($this.subData.btnId == 1) {
        $this.procurementDetail()
      }
      getApplyPurchaseList().then(res => {
        this.applyDataList = res.data.data && res.data.data
      })
    },
    methods: {
      queryMaterail(queryWord) {
        this.materiaOptions = []
        this.queryInfo.materialName = queryWord
        getMaterialAll(this.queryInfo).then(res => {
          this.materiaOptions = res.data.data.records && res.data.data.records
        })
      },
      // loadPurseApplyData(e) {
      //   if(!e) return;
      //   const planNumber = e
      //   const planId = this.formData.id
      //   let ary = [...this.applyDataList]
      //   ary.forEach(d => {
      //     if (planNumber === d.planNumber) {
      //       const applyId = d.procurementApplyId
      //       procurementApplyIsSelect(applyId).then(res => {
      //         const f = res.data.success
      //         if (!f) {
      //
      //           $this.$confirm(res.data.message, '提示', {
      //             confirmButtonText: '确定',
      //             cancelButtonText: '取消',
      //             type: 'warning'
      //           }).then(() => {
      //             $this.formData = {...d}
      //             $this.formData.id = planId
      //             return
      //           })
      //
      //         }else {
      //           $this.formData = {...d}
      //           $this.formData.id = planId
      //         }
      //       })
      //
      //     }
      //   })
      // },
      deleLine(index) {
        this.formData.materailInfoList.splice(index, 1)
      },
      submitLine() {
        // if (!this.materailInfoValue) {
        //   this.$message.warning("请选择物料编号")
        //   return
        // }
        this.visible = false
        this.formData.materailInfoList.push({
          materailBasicInfoId: null,
          purchaseQuantity: null,
          notLimitStock: null,
          singlePrice: null,
          materailNumber: null,
        })
        // this.materailInfoValue = null
      },
      init() {
        // getMaterialAll().then(res => {
        //   this.materiaOptions = res.data.data && res.data.data
        // })

        getAllSuppliers().then(res => {
          this.allSuppliers = res.data.data && res.data.data
        })

      },
      // 详情
      procurementDetail() {
        $this.loading = true
        procurementDetail($this.subData.id).then(res => {
          $this.loading = false
          res.data.data.statusName = res.data.data.status.name
          $this.formData = res.data.data
        }).catch(err => {
          $this.loading = false
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (!valid) {
            return $this.$message.error('请完善表单信息')
          }
          $this.formData.statusName = null
          if ($this.subData.btnId == 0) { // 修改
            $this.isAdd = true
            submitProcurement($this.formData).then(res => {
              $this.isAdd = false
              if (res.data.code == 500) {
                return $this.$message.error(res.data.message)
              }
              $this.$emit('refresh')
            }).catch(err => {
              $this.isAdd = false
            })
          }
          if ($this.subData.btnId == 1) { // 提交
            $this.isAdd = true
            reSubmitProcurement($this.formData).then(res => {
              $this.isAdd = false
              if (res.data.code == 500) {
                return $this.$message.error(res.data.message)
              }
              $this.$emit('refresh')
            }).catch(err => {
              $this.isAdd = false
            })
          }
        })
      },
      resetForm() {
        $this.$emit('closeView')
      }

    }
  }
</script>

<style scoped lang="scss">
  .el-input, .textarea {
    // width: 500 px;
  }

</style>
